<template>
<el-card>
     <!-- 面板屑导航 -->
    <el-breadcrumb separator="/" style="margin-bottom: 40px">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>
     <!-- 头部筛选+发表按钮 -->
    <el-row type="flex" justify="space-between" class="selectForm">
      <!-- 左侧的筛选表单 -->
      <el-col :span="20">
      <!-- 表单区域 -->
      <el-form ref="searchRef" :model="q" label-width="80px" inline size="small">
        <el-form-item label="文章分类">
          <el-select v-model="q.cate_id" placeholder="请选择分类">
            <el-option label="科技" value="科技"></el-option>
            <el-option label="科学" value="科学"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布状态">
          <el-select v-model="q.state" placeholder="请选择状态">
            <el-option label="已发布" value="已发布"></el-option>
            <el-option label="草稿" value="草稿"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">筛选</el-button>
          <el-button type="info">重置</el-button>
        </el-form-item>
      </el-form>
      </el-col>
      <!-- 右侧发表按钮 -->
      <el-col :span="1">
        <el-button type="primary" size="mini">发表文章</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
  </el-card>
</template>

<script>
import { reqGetArticleList } from '../../api/article'
export default {
  data () {
    return {
    // 查询参数 q
      q: {
        pagenum: 1,
        pagesize: 2,
        cate_id: '',
        state: ''
      },
      // 文章列表的数组
      artLiat: [],
      total: 0
    }
  },
  created () {
    this.initArtList()
  },
  methods: {
    async  initArtList () {
      const { data: res } = await reqGetArticleList(this.q)
      // console.log(res)
      if (res.code !== 0) return this.$message.error('获取文章列表失败')
      this.artLiat = res.data
      this.total = res.total
    }
  }
}
</script>

<style lang="less" scoped>
.selectForm{
  margin: 30px 0;
 /deep/ .el-form-item__label{
    font-size: 12px;
  }
}
</style>
